<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改优惠劵')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-coupons-edit" th:object="${mallCoupons}">
            <input name="couponsId" th:field="*{couponsId}" type="hidden">
            <div class="form-group">    
                <label class="col-sm-3 control-label">标题：</label>
                <div class="col-sm-8">
                    <input name="title" th:field="*{title}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">数量：</label>
                <div class="col-sm-8">
                    <input name="num" th:field="*{num}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">劵包id：</label>
                <div class="col-sm-8">
                    <select name="packageId" id="packageId" class="form-control m-b">
                        <option value="0">请选择劵包</option>
                        <option th:each="package : ${packages}" th:field="*{packageId}" th:value="${package.packageId}"
                                th:text="${package.packageName}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">有效天数：</label>
                <div class="col-sm-8">
                    <input name="effectiveDays" th:field="*{effectiveDays}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">使用时间：</label>
                <div class="col-sm-8">

                        <input type="text" name="useTime" th:value="${mallCoupons.useTime}" class="form-control" id="test10"
                               placeholder="yyyy-MM-dd HH:mm:ss - yyyy-MM-dd HH:mm:ss">


                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">劵类型：</label>
                <div class="col-sm-8">
                     <select name="couponsType" id="couponsType" class="form-control m-b">
                    <option  value="">请选择券</option>
                    <option th:selected="${mallCoupons.couponsType == 0}"  value="0">折扣券</option>
                    <option th:selected="${mallCoupons.couponsType == 1}" value="1">现金劵</option>
                    <option th:selected="${mallCoupons.couponsType == 2}" value="2">特价券</option>
                </select>
                </div>
            </div>
            <div class="form-group" id="limit">
                <label class="col-sm-3 control-label">使用门槛：</label>
                <div class="col-sm-8">
                    <input name="couponsLimit" class="form-control" type="hidden">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">适用范围：</label>
                <div class="col-sm-8">
                    <select name="" id="scenes" class="form-control m-b">
                        <option th:selected="${mallCoupons.scenes == 0}" value="0">通用</option>
                        <option th:selected="${mallCoupons.scenes == 1}" value="1">特定商品</option>
                        <option th:selected="${mallCoupons.scenes == 2}" value="2">特定分类</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script type="text/javascript">
        var prefix = ctx + "mall/coupons";
        $("#form-coupons-edit").validate({
            focusCleanup: true
        });
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            //日期时间范围
            laydate.render({
                elem: '#test10'
                , type: 'time'
                , range: true
            });
        })

        $("#scenes").change(function (e) {
            $("#aims").remove();
            var str = ''
            if(e.currentTarget.value==='1'){
                $.ajax({
                    url:'/mall/product/list',
                    type:'post',
                    dataType:'json',
                    success:function (res) {
                        str = '<div class="form-group" id="aims">\n' +
                            '                <label class="col-sm-3 control-label">选择商品：</label>\n' +
                            '                <div class="col-sm-8">\n' +
                            '                    <select name="aims"  class="form-control m-b">\n';
                        $.each( res.rows,function (i,o) {
                            str +=    ' <option value="'+o.productId+'">'+o.productName+'</option>';
                        })
                        str += '                    </select>\n' +
                            '                </div>\n' +
                            '            </div>';
                        $("#form-coupons-edit").append(str)
                    }
                })
            }if(e.currentTarget.value==='2'){
                $.ajax({
                    url:'/mall/category/list',
                    type:'post',
                    dataType:'json',
                    success:function (res) {
                        str = '<div class="form-group" id="aims">\n' +
                            '                <label class="col-sm-3 control-label">选择分类：</label>\n' +
                            '                <div class="col-sm-8">\n' +
                            '                    <select name="aims"  class="form-control m-b">\n';
                        $.each( res.rows,function (i,o) {
                            str +=    ' <option value="'+o.categoryId+'">'+o.categoryName+'</option>';
                        })
                        str += '                    </select>\n' +
                            '                </div>\n' +
                            '            </div>';
                        $("#form-coupons-edit").append(str)
                    }
                })
            }
        });
        $("#couponsType").change(function (e) {
            var str = '';
            $("#limit").find('div').remove()
            if(e.currentTarget.value==='0'){
                str = '<div class="input-group m-b"><span class="input-group-addon">打</span>\n' +
                    '                                        <input id="limits"  type="text" placeholder="多少" class="form-control"> <span class="input-group-addon">折</span>' +
                    '                                    </div>'

            }if(e.currentTarget.value==='1'){
                str = '<div class="input-group m-b"><span class="input-group-addon">面值</span>\n' +
                    '                                        <input type="text" id="limits"  placeholder="多少" class="form-control"> <span class="input-group-addon">元</span>' +
                    '                                    </div>'

            }if(e.currentTarget.value==='2'){
                str = '<div class="input-group m-b"><span class="input-group-addon">满减</span>\n' +
                    '                                        <input  id="limits" type="text" placeholder="多少" class="form-control"> <span class="input-group-addon">元</span>' +
                    '                                    </div>'

            }
            $("#limit").append(str)
        });
        $("#limits").on('change',function (e) {
           console.log(e)
        })

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/edit", $('#form-coupons-edit').serialize());
            }
        }
    </script>
</body>
</html>